<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>张凌 - 个人简历墙</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        // 配置Tailwind自定义颜色和字体
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        neutral: '#F5F7FA',
                        dark: '#1D2129'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(22, 93, 255, 0.1), 0 8px 10px -6px rgba(22, 93, 255, 0.1);
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-dark">
    <!-- 顶部通知栏 -->
    <div class="bg-primary text-white text-center py-2 text-sm">
        <p>页面将在 <span id="countdown" class="font-bold">30</span> 秒后自动跳转 <i class="fa fa-clock-o ml-1"></i></p>
    </div>

    <div class="container mx-auto px-4 py-8 max-w-5xl">
        <!-- 标题区域 -->
        <header class="text-center mb-10">
            <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-primary mb-2 text-shadow">张凌</h1>
            <div class="flex flex-wrap justify-center gap-x-6 gap-y-2 text-gray-600 text-lg">
                <p><i class="fa fa-id-card-o mr-2 text-primary"></i>学号: 230200592</p>
                <p><i class="fa fa-users mr-2 text-primary"></i>班级: 23云计算2</p>
            </div>
            <div class="w-24 h-1 bg-secondary mx-auto mt-4 rounded-full"></div>
        </header>

        <!-- 简历主体内容 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- 左侧个人信息 -->
            <div class="lg:col-span-1">
                <div class="bg-white rounded-xl shadow-md p-6 card-hover">
                    <div class="text-center mb-6">
                        <div class="w-36 h-36 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fa fa-user text-5xl text-primary"></i>
                        </div>
                        <h2 class="text-xl font-semibold">个人信息</h2>
                        <div class="w-16 h-0.5 bg-primary/30 mx-auto mt-2"></div>
                    </div>
                    
                    <ul class="space-y-4">
                        <li class="flex items-start">
                            <i class="fa fa-envelope-o text-primary mt-1 w-5"></i>
                            <span class="ml-3">example@email.com</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-phone text-primary mt-1 w-5"></i>
                            <span class="ml-3">138****5678</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-map-marker text-primary mt-1 w-5"></i>
                            <span class="ml-3">北京市海淀区</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-graduation-cap text-primary mt-1 w-5"></i>
                            <span class="ml-3">计算机科学与技术专业</span>
                        </li>
                    </ul>

                    <div class="mt-8">
                        <h3 class="font-semibold text-lg mb-3">技能特长</h3>
                        <div class="flex flex-wrap gap-2">
                            <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">云计算</span>
                            <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">Docker</span>
                            <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">Linux</span>
                            <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">Python</span>
                            <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm">网络安全</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧详细信息 -->
            <div class="lg:col-span-2 space-y-6">
                <!-- 教育经历 -->
                <div class="bg-white rounded-xl shadow-md p-6 card-hover">
                    <h2 class="text-xl font-semibold mb-4 flex items-center">
                        <i class="fa fa-book text-primary mr-2"></i>教育经历
                    </h2>
                    <div class="border-l-2 border-primary/30 pl-4 ml-2 space-y-6">
                        <div>
                            <h3 class="font-medium">某大学 - 云计算专业</h3>
                            <p class="text-gray-500 text-sm">2023年9月 - 至今</p>
                            <p class="mt-2 text-gray-600">主修课程：云计算基础、虚拟化技术、分布式系统、网络安全、容器技术等</p>
                        </div>
                    </div>
                </div>

                <!-- 项目经验 -->
                <div class="bg-white rounded-xl shadow-md p-6 card-hover">
                    <h2 class="text-xl font-semibold mb-4 flex items-center">
                        <i class="fa fa-cogs text-primary mr-2"></i>项目经验
                    </h2>
                    <div class="space-y-6">
                        <div>
                            <h3 class="font-medium">校园云存储系统设计</h3>
                            <p class="text-gray-500 text-sm">2023年11月 - 2023年12月</p>
                            <p class="mt-2 text-gray-600">使用Docker容器化技术搭建了一个小型云存储服务，实现了文件上传、下载和权限管理功能，支持多用户访问。</p>
                        </div>
                        <div>
                            <h3 class="font-medium">个人博客网站搭建</h3>
                            <p class="text-gray-500 text-sm">2024年3月 - 2024年4月</p>
                            <p class="mt-2 text-gray-600">基于Linux系统和Nginx服务器搭建了个人技术博客，使用Markdown编辑文章，实现了自动部署和SSL加密。</p>
                        </div>
                    </div>
                </div>

                <!-- 自我评价 -->
                <div class="bg-white rounded-xl shadow-md p-6 card-hover">
                    <h2 class="text-xl font-semibold mb-4 flex items-center">
                        <i class="fa fa-comment text-primary mr-2"></i>自我评价
                    </h2>
                    <p class="text-gray-600 leading-relaxed">
                        作为23云计算2班的一名学生，我对云计算技术有着浓厚的兴趣和热情。在学习过程中，我注重理论与实践相结合，积极参与各类实验和项目开发。
                        我具备良好的团队协作能力和沟通能力，在小组项目中能够积极贡献自己的想法并配合团队完成任务。未来希望能在云计算领域不断深耕，提升自己的专业技能。
                    </p>
                </div>
            </div>
        </div>

        <!-- 页脚 -->
        <footer class="mt-12 text-center text-gray-500 text-sm">
            <p>© 2024 张凌的个人简历 | 23云计算2班 | 学号：230200592</p>
        </footer>
    </div>

    <script>
        // 倒计时并自动跳转功能
        let seconds = 30;
        const countdownElement = document.getElementById('countdown');
        const targetUrl = 'https://example.com'; // 替换为实际要跳转的URL
        
        const countdownInterval = setInterval(() => {
            seconds--;
            countdownElement.textContent = seconds;
            
            if (seconds <= 0) {
                clearInterval(countdownInterval);
                window.location.href = targetUrl;
            }
        }, 1000);
    </script>
</body>
</html>